<template>
    <div class="top">
        <img src="../../assets/img/头部.png" alt="">
    </div>
    <div class="admit-top-wrapper">
        <div class="admit-top-item">
            <router-link :to="'/store'">
                 <img src="@/assets/img/admit左箭头.png" alt="">
            </router-link>
            <span>确认订单</span>
        </div>
        <div class="admit-top-content">
            <div class="admit-top-content-left">
                <div class="content-left-top">
                    <span>收货地址</span>
                    <span>北京理工大学国防科技园2号楼10层</span>
                </div>
                <div class="content-left-bottom">
                    <span>瑶妹（先生）</span>
                    <span>18911024266</span>
                </div>
            </div>
            <div class="admit-top-content-right">
                <img src="@/assets/img/右箭头.png" alt="">
            </div>
        </div>
        <div class="admit-bottom-content">
            <div class="buy-content-top-wrapper">
                <div class="buy-content-top">
                    <span>沃尔玛</span>
                </div>
                <div class="buy-content-content">
                    <div class="buy-content-content-left">
                        <img src="@/assets/img/番茄.png" alt="">
                    </div>
                    <div class="buy-content-content-right">
                        <div class="buy-content-content-right-top">
                            <span>番茄250g/份</span>
                        </div>
                        <div class="buy-content-content-right-bottom">
                            <span>33.6 x 3</span>
                            <span>¥99.9</span>
                        </div>
                    </div>
                </div>
                <div class="buy-content-content">
                    <div class="buy-content-content-left">
                        <img src="@/assets/img/提子.png" alt="">
                    </div>
                    <div class="buy-content-content-right">
                        <div class="buy-content-content-right-top">
                            <span>提子250g/份</span>
                        </div>
                        <div class="buy-content-content-right-bottom">
                            <span>33.6 x 3</span>
                            <span>¥99.9</span>
                        </div>
                    </div>
                </div>
                <div class="buy-content-bottom">
                    <div class="buy-content-bottom-zi">
                        共计3件/1.4kg
                    </div>
                    <div class="buy-content-bottom-image">
                        <img src="@/assets/img/下箭头.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="admit-content-wrapper"></div>

    <div @click="change" class="admit-wrapper" v-if="isShowModal == false">
        <div class="check-pay">
            <div class="check-pay-top">
                <span>确认要离开收银台？</span>
            </div>
            <div class="check-pay-mid">
                <span>请尽快完成支付，否则将被取消</span>
            </div>
            <div class="check-pay-bottom">
                <div class="check-pay-bottom-left">
                    <span>取消订单</span>
                </div>
                <router-link :to="'/payout'" class="check-pay-bottom-right">
                    <span>确认支付</span>
                </router-link>
            </div>
        </div>
    </div>





    <div class="details-bottom">
        <div class="admit-bottom-left">
            <span>实付金额</span>
            <span>¥62</span>
        </div>
        <div @click="change();" class="details-bottom-right">
            <span>去结算</span>
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
import { navData } from "@/untils/nav"
export default {
    setup() {
        const isShowModal = ref(true)
        const change0 = () => {
            isShowModal.value = false
        }
        const change = () => {
            isShowModal.value = !isShowModal.value
        }
        return {
            navData,
            change,
            change0,
            isShowModal,
        }
    }
};
</script>
<style>
.admit-top-wrapper {
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  width: 375px;
  height: 150px;
  position: absolute;
}

.admit-top-wrapper .admit-top-item {
  margin-top: 23px;
  margin-left: 19px;
  display: flex;
  align-items: center;
}

.admit-top-wrapper .admit-top-item span {
  margin-left: 125px;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #ffffff;
}

.admit-top-wrapper .admit-top-content {
  width: 339px;
  height: 111px;
  background: #ffffff;
  border-radius: 4px;
  margin-top: 22px;
  margin-left: 18px;
  display: flex;
  align-items: center;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left {
  display: flex;
  flex-direction: column;
}

.admit-top-wrapper .admit-top-content .admit-top-content-right {
  margin-left: 80px;
}

.admit-top-wrapper .admit-top-content .admit-top-content-right img {
  height: 16px;
  width: 8px;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left .content-left-top {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  margin-left: 16px;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left .content-left-top span:nth-child(1) {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #333333;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left .content-left-top span:nth-child(2) {
  margin-top: 14px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left .content-left-bottom {
  margin-top: 6px;
  margin-left: 16px;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left .content-left-bottom span:nth-child(1) {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #666666;
}

.admit-top-wrapper .admit-top-content .admit-top-content-left .content-left-bottom span:nth-child(2) {
  margin-left: 6px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #666666;
}

.admit-top-wrapper .admit-bottom-content {
  margin-top: 16px;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper {
  width: 339px;
  height: 230px;
  background-color: #fff;
  margin-left: 18px;
  border-bottom: solid 16px #f8f8f8;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-top {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #333333;
  padding-left: 16px;
  padding-top: 16px;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-content {
  padding-left: 16px;
  padding-top: 16px;
  padding-right: 16px;
  display: flex;
  width: 100%;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-content .buy-content-content-right {
  margin-left: 16px;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-content .buy-content-content-right .buy-content-content-right-top {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #333333;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-content .buy-content-content-right .buy-content-content-right-bottom {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  width: 237px;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-content .buy-content-content-right .buy-content-content-right-bottom span:nth-child(1) {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #e93b3b;
  line-height: 20px;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-content .buy-content-content-right .buy-content-content-right-bottom span:nth-child(2) {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #000000;
  text-align: right;
  line-height: 20px;
  margin-right: 30px;
}
.buy-content-content img{
    width: 50px;
}
.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-bottom {
  display: flex;
  background-color: #f5f5f5;
  width: 307px;
  height: 28px;
  font-family: PingFangSC-Light;
  font-size: 14px;
  color: #999999;
  margin-top: 16px;
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.admit-top-wrapper .admit-bottom-content .buy-content-top-wrapper .buy-content-bottom .buy-content-bottom-image {
  margin-left: 8px;
}

.admit-content-wrapper {
  width: 375px;
  height: 625px;
  background-color: #f8f8f8;
}

.admit-wrapper {
  top: 0;
  position: absolute;
  height: 701px;
  width: 375px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admit-wrapper .pay-out .pay-out-top {
  margin-left: 275px;
}

.admit-wrapper .pay-out .pay-out-top img {
  margin-top: 12px;
}

.admit-wrapper .pay-out .pay-out-mid {
  margin-top: 16px;
  margin-left: 129px;
}

.admit-wrapper .pay-out .pay-out-bottom {
  margin-top: 25px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  margin-left: 70px;
  color: #333333;
}

.admit-wrapper .check-pay {
  width: 301px;
  height: 157px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.admit-wrapper .check-pay .check-pay-top {
  margin-top: 24px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #333333;
}

.admit-wrapper .check-pay .check-pay-mid {
  margin-top: 8px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #666666;
}

.admit-wrapper .check-pay .check-pay-bottom {
  margin-top: 24px;
  display: flex;
}

.admit-wrapper .check-pay .check-pay-bottom .check-pay-bottom-left {
  border: 1px solid #4fb0f9;
  border-radius: 16px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #0091ff;
  padding: 6px 12px 6px 12px;
}

.admit-wrapper .check-pay .check-pay-bottom .check-pay-bottom-right {
  margin-left: 24px;
  background: #4fb0f9;
  border: 1px solid #4fb0f9;
  border-radius: 16px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ffffff;
  padding: 6px 12px 6px 12px;
}

.admit-wrapper .pay-out {
  width: 301px;
  height: 156px;
  background: #ffffff;
  border-radius: 4px;
  position: absolute;
}

</style>